<template>

  <div>
    <el-form :model="flightForm" ref="flightForm">
      <el-select class="srcCity"
                 v-model="flightForm.srcCity"

                 filterable
                 allow-create
                 default-first-option
                 placeholder="出发城市">
        <el-option
            v-for="(item,index) in cities"
            :key="index"
            :value="item">
        </el-option>

      </el-select>
      <el-select class="dstCity"
                 v-model="flightForm.dstCity"
                 filterable
                 allow-create
                 default-first-option
                 placeholder="目的城市">
        <el-option
            v-for="(item,index) in cities"
            :key="index"
            :value="item">
        </el-option>
      </el-select>

      <el-date-picker
          v-model="flightForm.startTime"
          type="date"
          placeholder="选择出发时间"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd">
      </el-date-picker>


      <el-button  v-on:click="submitForm('flightForm')" type="primary">查询</el-button>
      <el-button v-on:click="resetForm('flightForm')">重置</el-button>

    </el-form>

    <div>
      <el-table :data="flights">
        <el-table-column prop="id" label="航班" width="120">
        </el-table-column>
        <el-table-column prop="srcAirport" label="出发机场" width="120">
        </el-table-column>
        <el-table-column prop="dstAirport" label="目的机场" width="120" >
        </el-table-column>
        <el-table-column prop="startTime" label="出发时间" width="120" :formatter="startTimeFormat">
        </el-table-column>
        <el-table-column prop="endTime" label="到达时间" width="120" :formatter="endTimeFormat">
        </el-table-column>
        <el-table-column prop="economicPrice" label="经济舱价格" width="120">
        </el-table-column>
        <el-table-column prop="advancedPrice" label="头等舱价格" width="120">
        </el-table-column>
        <el-table-column prop="seatCount" label="剩余" width="120">
        </el-table-column>


      </el-table>

    </div>


  </div>
</template>

<script>




import moment from "moment";
import { formatDate } from '@/common/date.js'
export default {

  data(){
    return {
      cities:[
        "开放端口",
        "newYork"
      ],
      flightForm:{
        srcCity:'',
        dstCity:'',
        startTime:'',
        isManager:'true'

      },
      flights:[],
      startTime:''

    }

  },
  created(){
    const _this=this
    this.$axios.get("http://localhost:8181/flight/toFlightList")
        .then((resp)=>{
          _this.cities=resp.data
        })

  },
  methods:{
    submitForm(formName){
      const _this=this
      console.log(this.flightForm.startTime)

      this.$refs[formName].validate((valid)=>{
        if(valid){
          this.$axios.post('http://localhost:8181/flight/getFlightsByManager',this.flightForm)
              .then(function(resp){
                _this.flights=resp.data
                console.log(_this.flights)
              })
        }

      })
    },
    resetForm(formName){

    },
    startTimeFormat(flight){
      var date = new Date(flight.startTime);
      return formatDate(date, 'hh:mm:ss');
    },
    endTimeFormat(flight){
      var date= new Date(flight.endTime);
      return formatDate(date, 'hh:mm:ss');
    }

  },

}


</script>

<style scoped>

</style>